<template>
	<view class="login">
		<top-navigation :onlyShowStatusBar="type == 1"></top-navigation>
		<image class="logo" src="@/static/images/logo.png" mode="aspectFit" />
		<view class="inputbox">
			<view class="inputson">
				<image class="inputson-mr" src="@/module/static/images/phone.png" />
				<input type="text" placeholder="请输入手机号" placeholder-class="placeholder-style" v-model="phone" maxlength="11" />
			</view>
			<view class="inputson">
				<image class="inputson-mr" src="@/module/static/images/code.png" />
				<input type="text" placeholder="请输入验证码" placeholder-class="placeholder-style" v-model="phoneCode" maxlength="6" />
				<view class="code" @tap="getcode">
					{{countDown ? `${countDown}秒后获取` :'获取验证码'}}
				</view>
			</view>
			<view class="inputson">
				<image class="inputson-mr" src="@/module/static/images/pass.png" />
				<input type="text" placeholder="请输入密码" placeholder-class="placeholder-style" v-model="password" :password="passwordShow" maxlength="20" />
				<u-icon size="24" :name="passwordShow ? 'eye-off' : 'eye-fill'" @tap="passwordShow = !passwordShow"></u-icon>
			</view>
			<view class="inputson">
				<image class="inputson-mr" src="@/module/static/images/pass.png" />
				<input type="text" placeholder="请输入密码" placeholder-class="placeholder-style" v-model="rePassword" :password="rePasswordShow" maxlength="20" />
				<u-icon size="24" :name="rePasswordShow ? 'eye-off' : 'eye-fill'" @tap="rePasswordShow = !rePasswordShow"></u-icon>
			</view>
		</view>
		<view class="agreement">
			<radio :checked="isagree" @tap="isagree = !isagree" style="transform:scale(0.6)" />
			<text>我已阅读并同意<text class="xy" @tap="$toTreaty('用户协议')">《用户协议》</text>和<text class="xy" @tap="$toTreaty('隐私协议')">《隐私协议》</text></text>
		</view>
		<view class="but" @tap="register">修改</view>
		<view class="tabs" v-if="type == 1">
			<view>想起密码？<text @tap="$navto({ url:'/module/app-login/login', type: '2'})">去登录</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isagree: false,
				phone: '', //手机号
				password: '', //密码
				passwordShow: true, // 是否为密文
				rePassword: '', //验证密码
				rePasswordShow: true, // 是否为密文
				phoneCode: '', //验证码
				countDown: 0,
				logintype: 2, //1登录2注册3忘记密码
				type: 1, // 1、从登录进入的不可以返回 2、从设置进入的，可以返回
			};
		},
		onLoad(e) {
			if (e.type) this.type = e.type;
		},
		methods: {
			//注册接口
			register() {
				if (!this.isagree) {
					uni.$showModal({
						title: '提示',
						content: '请您确认已完成阅读用户协议和隐私政策',
						showCancel: false
					});
					this.lock = false;
					return;
				}
				if (this.$check.checkPhoneNumber(this.phone, '手机号', true)) return;
				if (!this.phoneCode) return this.$toast('请输入验证码!')
				if (!this.password) return this.$toast('请输入密码')
				if (!this.rePassword) return this.$toast('请输入确认密码')
				if (this.password != this.rePassword) return this.$toast('两次密码输入不一致')

			},
			// 获取验证码
			getcode() {
				if (this.countDown) return;
				if (this.$check.checkPhoneNumber(this.phone, '手机号', true)) return;

				this.gocountdown()
			},
			//倒计时
			gocountdown() {
				if (this.countDown) return;
				// 倒计时
				this.countDown = 59
				let timer = setInterval(() => {
					this.countDown--;
					if (this.countDown <= 0) {
						clearInterval(timer);
						timer = null;
					}
				}, 1000);
			},
			toLogin(e) {
				uni.navigateTo({
					url: e
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	//单选框修改未点击时的边框颜色
	::v-deep .uni-radio-input {
		border-color: $uni-color-primary !important;
	}

	//单选框修改选中时的背景颜色
	::v-deep .uni-radio-input-checked {
		background: $uni-color-primary !important;
	}

	.login {
		display: flex;
		flex-direction: column;
		align-items: center;

		.logo {
			width: 200rpx;
			height: 200rpx;
			margin-top: 120rpx;
			background: rgba(0, 0, 0, 0);
			box-shadow: 0px 4rpx 8rpx rgba(4, 43, 83, 0.09);
			border-radius: 50%;
		}

		.inputbox {
			margin: 96rpx 72rpx 0 72rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.inputson {
				width: 100%;
				height: 90rpx;
				margin-top: 40rpx;
				padding-bottom: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #E6E6E6;
				box-sizing: border-box;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				.inputson-mr {
					margin-right: 20rpx;
				}

				input {
					flex: 1;
					width: 100%;
					height: 48rpx;
				}

				.code {
					width: 130rpx;
					text-align: center;
					padding: 10rpx 20rpx;
					background: rgba(255, 255, 255, 0.39);
					border: 2rpx solid $uni-color-primary;
					border-radius: 8rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: $uni-color-primary;
				}
			}
		}

		.agreement {
			margin: 100rpx 72rpx 0 72rpx;
			display: flex;
			align-items: center;

			.round {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 28rpx;
				height: 28rpx;
				background: #FFFFFF;
				border: 1px solid #707070;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.roundcur {
				border: 1px solid #FFFFFF;
			}

			text {
				flex: 1;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;

				.xy {
					color: $uni-color-primary;
				}
			}
		}

		.but {
			margin-top: 30rpx;
			padding: 22rpx 272rpx;
			background: $uni-color-primary;
			border-radius: 12rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.tabs {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #999999;

			view {
				display: flex;
			}

			text {
				color: $uni-color-primary;
				text-decoration: underline
			}
		}

	}

	.placeholder-style {
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}
</style>
